<template>
	<view class="box">
		<u-navbar :fixed="true" :placeholder="true" title="我的考试" @leftClick="leftClick" bgColor="#0F53AC"
			leftIconColor="#fff">
		</u-navbar>
		<view class="listBot">
			<u-sticky bgColor="#fff">
				<u-tabs :list="list" :lineWidth="80" lineColor="#0F53AC" :activeStyle="activeStyle" :scrollable="false"
					:inactiveStyle="inactiveStyle" :itemStyle="itemStyle" @click="tabsClick" :current="current">
				</u-tabs>
			</u-sticky>
		</view>
		<view class="main-box" v-for="(item,index) in examList" :key="index" @click="handleTo(item)">
			<view class="image-box">
				<image class="title-image" :src="item.picture">
				</image>
			</view>
			<view class="info-title">
				<view class="info-text">{{item.examPaperName}}</view>
				<view class="info-tags"
					:class="item.examFlag === 1?'wait-clolr':item.examFlag === 2?'error-clolr':'finish-clolr'">
					{{item.examFlag === 1?'待考试':item.examFlag === 2?'缺考':'已考试'}}
				</view>
			</view>
			<view class="info-content">
				<span style="margin-right: 10rpx;">考试时间:</span>
				<span v-if="item.examStartTime || item.examEndTime">{{item.examStartTime}} 至 {{item.examEndTime}}</span>
				<span v-else>待定</span>
			</view>
			<view class="info-content">关联培训:
				{{item.trainName}}
			</view>

		</view>
		<u-loadmore v-if="total>5" :status="status" :line="true" />
		<view class="empty-data" v-if="examList.length==0">
			<u-empty mode="data" :marginTop="100" text="暂无数据"></u-empty>
		</view>
		<view class="bottom-subside" style='height: 22px;'></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeStyle: {
					color: '#0F53AC',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				},
				inactiveStyle: {
					color: '#8c8c8c',
					transform: 'scale(1)'
				},
				itemStyle: {
					paddingLeft: '30rpx',
					paddingRight: '30rpx',
					paddingTop: '24rpx',
					paddingBottom: '24rpx',
					height: '48rpx'
				},
				current: 0,
				list: [{
					name: '待考试',
				}, {
					name: '已考试',
				}, {
					name: '缺考',
				}],
				params: {
					pn: 1,
					ps: 5,
					// 考试状态；1.未考试；2.缺考； 3.已考试 ；
					examFlag: 1,
				},
				examList: [],
				pages: 1,
				total: 0,
				status: 'loadmore',
			}
		},
		onShow() {
			this.examList = [];
			this.params.pn = 1;
			this.getList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.examList = [];
			this.params.pn = 1;
			this.getList();
		},
		methods: {
			leftClick() {
				uni.switchTab({
					url: '/pages/work/index'
				})
			},
			getList() {
				uni.$u.http.post(`/train/mobile/exam/examList`, this.params).then(res => {
					if (res.code == 0) {
						this.examList = this.examList.concat(res.data.records)
						this.pages = res.data.pages;
						this.total = res.data.total;
						uni.stopPullDownRefresh()
					}
				}).catch(err => {})
			},
			tabsClick(e) {
				this.current = e.index
				this.params.pn = 1;
				if (e.index === 0) {
					this.params.examFlag = 1
				} else if (e.index === 1) {
					this.params.examFlag = 3
				} else if (e.index === 2) {
					this.params.examFlag = 2
				}
				this.examList = []
				this.getList()
			},
			handleTo(item) {
				if (item.examFlag == 1) {
					// 待考试
					uni.navigateTo({
						url: `/pages/subPackagesC/exam/examwait?examPaperId=${item.examPaperId}&trainId=${item.trainId}`
					})
				} else if (item.examFlag == 3) {
					// 已考试
					uni.navigateTo({
						url: `/pages/subPackagesC/exam/examfinish?trainId=${item.trainId}&examPaperId=${item.examPaperId}`
					})
				} else {
					// 缺考
					uni.navigateTo({
						url: `/pages/subPackagesC/exam/examerror?type=${0}`
					})
				}
			}
		},
		onReachBottom() {
			if (this.params.pn >= this.pages) return;
			this.status = 'loading';
			this.params.pn = ++this.params.pn;
			setTimeout(() => {
				this.getList()
				if (this.params.pn >= this.pages) this.status = 'nomore';
				else this.status = 'loading';
			}, 1000)
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		height: 100vh;
		background-color: #ffffff;

		.main-box {
			padding: 32rpx;
			border-bottom: 16rpx solid #f5f5f5;
			background-color: #fff;

			.image-box {
				position: relative;
				width: 100%;

				.title-image {
					display: block;
					width: 100%;
					height: 156px;
					border-radius: 4px;
				}

				.title-logo {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 243px;
					height: 100px;
					border: 1px solid #FFFFFF;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					color: #fff;
					font-size: 48rpx;
				}
			}


			.info-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 32rpx;
				color: #2b2b2b;
				margin: 20rpx 0 10rpx;

				.info-text {
					font-size: 16px;
					font-weight: 500;
					word-break: break-all;
					word-wrap: break-word;
				}

				.info-tags {
					min-width: 74rpx;
					border-radius: 4px;
					font-size: 24rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 4px 12px 4px 12px;

				}

				.wait-clolr {
					color: #0F53AC;
					background: rgba(15, 83, 172, 0.2);
				}

				.finish-clolr {
					color: #02AD82;
					background: rgba(2, 173, 130, 0.2);
				}

				.error-clolr {
					color: #FF4D4D;
					background: rgba(255, 77, 77, 0.2);
				}
			}

			.info-content {
				font-size: 14px;
				color: #666666;
				font-weight: 400;
				margin-top: 16rpx;
			}
		}

	}
</style>